// pages/orderFood.ts
import { foodList } from './data';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /** 菜单是否在顶部*/
    menuTop: false,
    /**食品列表信息 */
    foodList:foodList,
    /** 食品类型名称 */
    foodKindName: [],
    /**食品类型激活态索引 */
    activeIndex:0,
    /**整个页面滚动的距离 */
    scrollTop:0,
    /**左栏食品类型滚动的距离 */
    leftScrollTop:0,
    /**右栏食品细分中处于激活态的索引 */
    navIndex:0
  },

  /** 整个页面滚动*/
  viewScroll(e:any) {
    // e.detail.scrollTop 是页面滚动的距离（像素）
    // console.log(e.detail.scrollTop)
    if (this.data.menuTop) {
      if (e.detail.scrollTop <= 175) {
        this.setData({ menuTop: false });
      }
    } else {
      if (e.detail.scrollTop >= 175) {
        this.setData({ menuTop: true });
      }
    }
  },

  /**选择食品类型(左栏) */
  selectKind(e:any){
    // console.log(e.currentTarget.offsetTop);
    this.setData({menuTop:true,scrollTop:190,navIndex:0});
    if(e.currentTarget.dataset.index!=this.data.activeIndex){
      this.setData({activeIndex:e.currentTarget.dataset.index})
    }
    if(e.currentTarget.offsetTop<=256){
      this.setData({leftScrollTop:0})
    }
    else if(e.currentTarget.offsetTop>256 && this.data.leftScrollTop<380){//滚动条在偏上方，点击下方的食品类型
      this.setData({leftScrollTop:110*(e.currentTarget.offsetTop-256)/63})
    }
    if(this.data.leftScrollTop>=380){//滚动条在偏下方，点击上方的食品类型
      this.setData({leftScrollTop:e.currentTarget.offsetTop-200})
    }
  },

  /**选择食品类型(右栏) */
  clickNav(e:any){
    console.log(e.target.dataset.index);
    if(e.target.dataset.index!=this.data.navIndex){
      this.setData({
        navIndex:e.target.dataset.index
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    /**处理食品类型文本时的缓存变量 */
    let nowData:string[]= [];   
    /** 控制食品类型文本换行的方法*/
    const splitKind = (str: string) => {
      if (str.length === 4 || str.length === 5) {
        if(str==='桶多人餐'){//控制具体文本的排列方式
          nowData.push('桶\n多人餐')
        }else{
          nowData.push(str.slice(0, 2) + '\n' + str.slice(2)) 
        }            
      }
      else if (str.length === 6) {
        nowData.push(str.slice(0, 3) + '\n' + str.slice(3))
      }
      else if (str.length < 4) {
        nowData.push(str)
      }
      this.setData({
        foodKindName: nowData
      })
    }
    foodList.forEach(element => {
      splitKind(element.title)
    }); 
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})